<template>
	<view class="content">
		<Head :only="only" :title='written'></Head>
		<view class="top-bottom">
			{{name}}
		</view>
		<view class="top">
			<dateTimePickerSync :placeholder="placeholder" mode="datetime" @TimePicker="TimePicker"></dateTimePickerSync>
			<scroll-view class="main-top" :style="'height:calc(100% - 123px - '+ KeyboardHeight +'px )'"
				scroll-y="true" :scroll-top="scrollTop">
				<view class="box-flisa">
					<view class="top-top" v-for="(item,index) in optslist" :key="index">
						<view class="top-left" v-if="item.remarkc.length >2">{{item.remarkc}}</view>
						<view class="top-left " v-else>
							<view class="top-title">
								{{item.remarkc}}
							</view>
						</view>
						<view class="top-right">
							<u-input v-model="item.input" type="tel" pattern="[0-9]*" :adjust-position="false"
								@focus="focusValue(index)">
								<template slot="suffix">
									<text class="right-title">{{item.phunit}}</text>
								</template>
							</u-input>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="bottom-bottom">
				<u-button type="primary" class="btn1" text="保存" color="#6AC8B5" @tap="nav"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import Head from '../../components/html/head.vue'
	import dateTimePickerSync from '../../components/html/song-datetime-picker/song-datetime-picker.vue'
	import {
		Ward_GetphysiorcdInfo_Detail,
		EMR_Nursing_Savephysiorcd
	} from '../../api/user.js'
	import {
		mapMutations,
		mapState
	} from "vuex";
	export default {
		components: {
			Head,
			dateTimePickerSync
		},
		computed: {
			...mapState('user', ['userInfo', 'deleteObj'])
		},
		data() {
			return {
				only: false,
				written: '',
				show: false,
				// birthday: '选择时间',
				value: "",
				name: '',
				placeholder: '选择时间',
				optslist: [],
				KeyboardHeight: 0,
				scrollTop: 0,
				VauleIdx: 0
			}
		},
		onLoad(data) {
			console.log(data);
			this.value = data.id
			this.name = data.name
			this.Ward_GetphysiorcdInfo_DetailFun()
			// this.KeyboardHeightFun()
		},
		watch: {
			VauleIdx: {
				handler(newval) {
					console.log(newval);
					this.$nextTick(() => {
						this.scrollTop = (40 * this.VauleIdx ) + (this.VauleIdx *2)
						console.log(this.scrollTop );
					})
				},
				// deep: true,
			}
		},
		mounted() {
			this.KeyboardHeightFun()
		},
		methods: {
			focusValue(value) {
				this.VauleIdx = value
				// this.KeyboardHeightFun()
				// console.log(value);
			},
			KeyboardHeightFun(value) {
				if (this.VauleIdx == undefined) {
					return
				}
				uni.onKeyboardHeightChange(res => {
					this.KeyboardHeight = res.height
					console.log(this.KeyboardHeight);
					if (res.height == 0) {
						this.scrollTop = 0
					}
				})
			},
			async nav() {
				try {
					if (this.placeholder == '选择时间' || this.placeholder == '') {
						return uni.showToast({
							title: '请先选择时间再保存！',
							mask: true,
							duration: 1000,
							icon: "none"
						});
					}
					const user = uni.getStorageSync('userInfo')
					const obj = uni.getStorageSync('deleteObj')
					console.log(this.optslist, obj);
					let array = this.optslist.map((item, index) => {
						let inpds = item.remarkc + ':' + item?.input ? item.input : '' + item.phunit
						return {
							mrn: obj.MRN,
							series: item.series,
							phcode: item.abc,
							phvalue: item.drcode,
							remark: inpds ? inpds : '',
							phunit: item.phunit,
							inputfield: item?.input ? item.input : '',
							valuetype: item.valuetype,
							bedid: obj.BEDID,
							jp: user.sUserid,
							deptid: user.HosKind
						}
					})
					let arrays = JSON.stringify(array)
					const data = {
						HosKind: user.hoscode,
						jsonarray: arrays,
						rcdtime: this.placeholder,
					}
					const res = await this.$http.EMR_Nursing_Savephysiorcd(data)
					if (res[0].result == '1') {
						uni.showToast({
							title: '保存成功！',
							duration: 1000
						});
						await uni.redirectTo({
							url: "../hospitallist/index"
						})
					} else {
						uni.showToast({
							title: '保存失败！',
							duration: 1000,
							icon: 'error'
						});
					}
				} catch (e) {
					//TODO handle the exception
				}

			},
			focusHilt() {
				this.show = true
			},
			TimePicker(data) {
				this.placeholder = data
			},
			async Ward_GetphysiorcdInfo_DetailFun() {
				try {
					// uni.showToast({
					// 	title: '加载中...', //显示的文字
					// 	duration: 5000, //显示多少时间，默认1500毫秒
					// 	icon: "loading", //自定义显示的图标，默认成功success，错误error,加载loading，不显示图标是none
					// 	mask: true
					// })
					const user = uni.getStorageSync('userInfo')
					const data = {
						HosKind: user.hoscode,
						modelid: this.value,
						sOperdept: user.HosKind,
						sOperJp: user.sPassword
					}
					const res = await this.$http.Ward_GetphysiorcdInfo_Detail(data)
					if (res) {
						this.optslist = res
						// uni.hideToast();
					}
				} catch (e) {
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		position: relative;
	}

	.top {
		padding: 10px 10px 0;
		height: calc(100% - 167px);

		.box-flisa {
			overflow: hidden;
			// margin-top: 10px;
			// height: calc(100% - 50px);
			// overflow-y: scroll;
		}
	}

	.top-top {
		display: flex;
		align-items: center;
		margin-top: 10px;

		.top-left {
			width: 40%;
			height: 36px;
			background: #B9CACB;
			border-radius: 6px 2px 2px 6px;
			font-size: 16px;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 16px;
			display: flex;
			align-items: center;
			// justify-content: center;
			padding-left: 10px;
			border-right: 0px;
		}

		.top-title {
			width: 48px;
			text-align-last: justify;
			text-align: justify;
		}

		.top-right {
			width: 60%;
			height: 34px;
			background: #FFFFFF;
			border-radius: 0px 6px 6px 0px;
			border: 1px solid #B9CACB;
			border-left: 0px;
			display: flex;
			align-items: center;
			padding: 0 20rpx;

			.right-title {
				font-size: 16px;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #333333;
				line-height: 24px
			}
		}

	}

	.top-bottom {
		height: 50px;
		background: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 21px;
		font-family: SourceHanSansCN-Normal, SourceHanSansCN;
		font-weight: 400;
		color: #333333;
		line-height: 32px;
		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
		border-top: 1px solid rgba(0, 0, 0, 0.04);
	}

	.bottom-bottom {
		// position: absolute;
		// bottom: 10px;
		// left: 0;
		width: 100%;
		padding: 10px 0 0;
	}

	.u-reset-button ::v-deep .u-button__text {
		font-size: 22px !important;
		font-family: SourceHanSansCN-Medium, SourceHanSansCN;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 33px;
		letter-spacing: 12px;
	}

	.btn1 {
		box-shadow: 0px 2px 6px 0px #6AC8B5;
		height: 56px;
	}

	::v-deep .u-border {
		border-color: #B3E7EA !important;
	}

	::v-deep .top-right .u-border {
		border-color: transparent !important;
	}
</style>
